<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>色彩 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="preload" href="/my/assets/css/0.styles.3b7da768.css" as="style"><link rel="preload" href="/my/assets/js/app.145deadf.js" as="script"><link rel="preload" href="/my/assets/js/546.c48d7d92.js" as="script"><link rel="preload" href="/my/assets/js/1331.9b9e0405.js" as="script"><link rel="preload" href="/my/assets/js/846.453b6d32.js" as="script"><link rel="preload" href="/my/assets/js/810.a822a3bc.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.3b7da768.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开发指南</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>内置资源</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/my/guide/color.html" aria-current="page" class="active sidebar-link">色彩</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/guide/color.html#基础色板" class="sidebar-link">基础色板</a></li><li class="sidebar-sub-header"><a href="/my/guide/color.html#中性色板" class="sidebar-link">中性色板</a></li></ul></li><li><a href="/my/guide/theme.html" class="sidebar-link">内置主题</a></li><li><a href="/my/guide/vars.html" class="sidebar-link">主题变量</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>进阶教程</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>第三方类库</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="色彩"><a href="#色彩" class="header-anchor">#</a> 色彩</h1> <p>系统级色彩体系主要定义了中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。</p> <h2 id="基础色板"><a href="#基础色板" class="header-anchor">#</a> 基础色板</h2> <p>MyWeb 4.x 使用 <a href="https://ant.design/docs/spec/colors-cn" target="_blank" rel="noopener noreferrer">Ant Design<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 提供的的基础色板。共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。</p> <div class="colors" data-v-554185ac><div class="el-row" style="margin-left:-10px;margin-right:-10px;" data-v-554185ac><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Dust Red / 薄暮</h3> <p data-v-4de1ef34>斗志、奔放</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#f5222d" class="my-float clipboard" style="background:#f5222d;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#f5222d</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#5c0011" title="点击可复制颜色码" class="my-float clipboard" style="background:#5c0011;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#5c0011</div></div><div data-clipboard-text="#820014" title="点击可复制颜色码" class="my-float clipboard" style="background:#820014;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#820014</div></div><div data-clipboard-text="#a8071a" title="点击可复制颜色码" class="my-float clipboard" style="background:#a8071a;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#a8071a</div></div><div data-clipboard-text="#cf1322" title="点击可复制颜色码" class="my-float clipboard" style="background:#cf1322;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#cf1322</div></div><div data-clipboard-text="#f5222d" title="点击可复制颜色码" class="my-float clipboard" style="background:#f5222d;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#f5222d</div></div><div data-clipboard-text="#ff4d4f" title="点击可复制颜色码" class="my-float clipboard" style="background:#ff4d4f;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#ff4d4f</div></div><div data-clipboard-text="#ff7875" title="点击可复制颜色码" class="my-float clipboard" style="background:#ff7875;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#ff7875</div></div><div data-clipboard-text="#ffa39e" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffa39e;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffa39e</div></div><div data-clipboard-text="#ffccc7" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffccc7;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffccc7</div></div><div data-clipboard-text="#fff1f0" title="点击可复制颜色码" class="my-float clipboard" style="background:#fff1f0;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$red-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#fff1f0</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Volcano / 火山</h3> <p data-v-4de1ef34>醒目、澎湃</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#fa541c" class="my-float clipboard" style="background:#fa541c;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#fa541c</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#610b00" title="点击可复制颜色码" class="my-float clipboard" style="background:#610b00;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#610b00</div></div><div data-clipboard-text="#871400" title="点击可复制颜色码" class="my-float clipboard" style="background:#871400;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#871400</div></div><div data-clipboard-text="#ad2102" title="点击可复制颜色码" class="my-float clipboard" style="background:#ad2102;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#ad2102</div></div><div data-clipboard-text="#d4380d" title="点击可复制颜色码" class="my-float clipboard" style="background:#d4380d;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#d4380d</div></div><div data-clipboard-text="#fa541c" title="点击可复制颜色码" class="my-float clipboard" style="background:#fa541c;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#fa541c</div></div><div data-clipboard-text="#ff7a45" title="点击可复制颜色码" class="my-float clipboard" style="background:#ff7a45;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#ff7a45</div></div><div data-clipboard-text="#ff9c6e" title="点击可复制颜色码" class="my-float clipboard" style="background:#ff9c6e;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#ff9c6e</div></div><div data-clipboard-text="#ffbb96" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffbb96;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffbb96</div></div><div data-clipboard-text="#ffd8bf" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffd8bf;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffd8bf</div></div><div data-clipboard-text="#fff2e8" title="点击可复制颜色码" class="my-float clipboard" style="background:#fff2e8;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$volcano-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#fff2e8</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Sunset Orange / 日暮</h3> <p data-v-4de1ef34>温暖、欢快</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#fa8c16" class="my-float clipboard" style="background:#fa8c16;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#fa8c16</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#612500" title="点击可复制颜色码" class="my-float clipboard" style="background:#612500;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#612500</div></div><div data-clipboard-text="#873800" title="点击可复制颜色码" class="my-float clipboard" style="background:#873800;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#873800</div></div><div data-clipboard-text="#ad4e00" title="点击可复制颜色码" class="my-float clipboard" style="background:#ad4e00;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#ad4e00</div></div><div data-clipboard-text="#d46b08" title="点击可复制颜色码" class="my-float clipboard" style="background:#d46b08;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#d46b08</div></div><div data-clipboard-text="#fa8c16" title="点击可复制颜色码" class="my-float clipboard" style="background:#fa8c16;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#fa8c16</div></div><div data-clipboard-text="#ffa940" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffa940;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffa940</div></div><div data-clipboard-text="#ffc069" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffc069;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffc069</div></div><div data-clipboard-text="#ffd591" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffd591;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffd591</div></div><div data-clipboard-text="#ffe7ba" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffe7ba;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffe7ba</div></div><div data-clipboard-text="#fff7e6" title="点击可复制颜色码" class="my-float clipboard" style="background:#fff7e6;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$orange-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#fff7e6</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Calendula Gold / 金盏花</h3> <p data-v-4de1ef34>活力、积极</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#faad14" class="my-float clipboard" style="background:#faad14;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#faad14</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#613400" title="点击可复制颜色码" class="my-float clipboard" style="background:#613400;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#613400</div></div><div data-clipboard-text="#874d00" title="点击可复制颜色码" class="my-float clipboard" style="background:#874d00;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#874d00</div></div><div data-clipboard-text="#ad6800" title="点击可复制颜色码" class="my-float clipboard" style="background:#ad6800;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#ad6800</div></div><div data-clipboard-text="#d48806" title="点击可复制颜色码" class="my-float clipboard" style="background:#d48806;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#d48806</div></div><div data-clipboard-text="#faad14" title="点击可复制颜色码" class="my-float clipboard" style="background:#faad14;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#faad14</div></div><div data-clipboard-text="#ffc53d" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffc53d;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffc53d</div></div><div data-clipboard-text="#ffd666" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffd666;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffd666</div></div><div data-clipboard-text="#ffe58f" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffe58f;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffe58f</div></div><div data-clipboard-text="#fff1b8" title="点击可复制颜色码" class="my-float clipboard" style="background:#fff1b8;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#fff1b8</div></div><div data-clipboard-text="#fffbe6" title="点击可复制颜色码" class="my-float clipboard" style="background:#fffbe6;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$gold-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#fffbe6</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Sunrise Yellow / 日出</h3> <p data-v-4de1ef34>出生、阳光</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#fadb14" class="my-float clipboard" style="background:#fadb14;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#fadb14</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#614700" title="点击可复制颜色码" class="my-float clipboard" style="background:#614700;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#614700</div></div><div data-clipboard-text="#876800" title="点击可复制颜色码" class="my-float clipboard" style="background:#876800;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#876800</div></div><div data-clipboard-text="#ad8b00" title="点击可复制颜色码" class="my-float clipboard" style="background:#ad8b00;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#ad8b00</div></div><div data-clipboard-text="#d4b106" title="点击可复制颜色码" class="my-float clipboard" style="background:#d4b106;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#d4b106</div></div><div data-clipboard-text="#fadb14" title="点击可复制颜色码" class="my-float clipboard" style="background:#fadb14;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#fadb14</div></div><div data-clipboard-text="#ffec3d" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffec3d;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffec3d</div></div><div data-clipboard-text="#fff566" title="点击可复制颜色码" class="my-float clipboard" style="background:#fff566;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#fff566</div></div><div data-clipboard-text="#fffb8f" title="点击可复制颜色码" class="my-float clipboard" style="background:#fffb8f;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#fffb8f</div></div><div data-clipboard-text="#ffffb8" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffffb8;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffffb8</div></div><div data-clipboard-text="#feffe6" title="点击可复制颜色码" class="my-float clipboard" style="background:#feffe6;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$yellow-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#feffe6</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Lime / 青柠</h3> <p data-v-4de1ef34>自然、生机</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#a0d911" class="my-float clipboard" style="background:#a0d911;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#a0d911</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#254000" title="点击可复制颜色码" class="my-float clipboard" style="background:#254000;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#254000</div></div><div data-clipboard-text="#3f6600" title="点击可复制颜色码" class="my-float clipboard" style="background:#3f6600;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#3f6600</div></div><div data-clipboard-text="#5b8c00" title="点击可复制颜色码" class="my-float clipboard" style="background:#5b8c00;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#5b8c00</div></div><div data-clipboard-text="#7cb305" title="点击可复制颜色码" class="my-float clipboard" style="background:#7cb305;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#7cb305</div></div><div data-clipboard-text="#a0d911" title="点击可复制颜色码" class="my-float clipboard" style="background:#a0d911;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#a0d911</div></div><div data-clipboard-text="#bae637" title="点击可复制颜色码" class="my-float clipboard" style="background:#bae637;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#bae637</div></div><div data-clipboard-text="#d3f261" title="点击可复制颜色码" class="my-float clipboard" style="background:#d3f261;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#d3f261</div></div><div data-clipboard-text="#eaff8f" title="点击可复制颜色码" class="my-float clipboard" style="background:#eaff8f;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#eaff8f</div></div><div data-clipboard-text="#f4ffb8" title="点击可复制颜色码" class="my-float clipboard" style="background:#f4ffb8;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#f4ffb8</div></div><div data-clipboard-text="#fcffe6" title="点击可复制颜色码" class="my-float clipboard" style="background:#fcffe6;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$lime-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#fcffe6</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Polar Green / 极光绿</h3> <p data-v-4de1ef34>健康、创新</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#52c41a" class="my-float clipboard" style="background:#52c41a;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#52c41a</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#092b00" title="点击可复制颜色码" class="my-float clipboard" style="background:#092b00;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#092b00</div></div><div data-clipboard-text="#135200" title="点击可复制颜色码" class="my-float clipboard" style="background:#135200;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#135200</div></div><div data-clipboard-text="#237804" title="点击可复制颜色码" class="my-float clipboard" style="background:#237804;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#237804</div></div><div data-clipboard-text="#389e0d" title="点击可复制颜色码" class="my-float clipboard" style="background:#389e0d;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#389e0d</div></div><div data-clipboard-text="#52c41a" title="点击可复制颜色码" class="my-float clipboard" style="background:#52c41a;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#52c41a</div></div><div data-clipboard-text="#73d13d" title="点击可复制颜色码" class="my-float clipboard" style="background:#73d13d;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#73d13d</div></div><div data-clipboard-text="#95de64" title="点击可复制颜色码" class="my-float clipboard" style="background:#95de64;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#95de64</div></div><div data-clipboard-text="#b7eb8f" title="点击可复制颜色码" class="my-float clipboard" style="background:#b7eb8f;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#b7eb8f</div></div><div data-clipboard-text="#d9f7be" title="点击可复制颜色码" class="my-float clipboard" style="background:#d9f7be;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#d9f7be</div></div><div data-clipboard-text="#f6ffed" title="点击可复制颜色码" class="my-float clipboard" style="background:#f6ffed;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$green-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#f6ffed</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Cyan / 明青</h3> <p data-v-4de1ef34>希望、坚强</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#13c2c2" class="my-float clipboard" style="background:#13c2c2;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#13c2c2</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#002329" title="点击可复制颜色码" class="my-float clipboard" style="background:#002329;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#002329</div></div><div data-clipboard-text="#00474f" title="点击可复制颜色码" class="my-float clipboard" style="background:#00474f;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#00474f</div></div><div data-clipboard-text="#006d75" title="点击可复制颜色码" class="my-float clipboard" style="background:#006d75;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#006d75</div></div><div data-clipboard-text="#08979c" title="点击可复制颜色码" class="my-float clipboard" style="background:#08979c;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#08979c</div></div><div data-clipboard-text="#13c2c2" title="点击可复制颜色码" class="my-float clipboard" style="background:#13c2c2;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#13c2c2</div></div><div data-clipboard-text="#36cfc9" title="点击可复制颜色码" class="my-float clipboard" style="background:#36cfc9;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#36cfc9</div></div><div data-clipboard-text="#5cdbd3" title="点击可复制颜色码" class="my-float clipboard" style="background:#5cdbd3;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#5cdbd3</div></div><div data-clipboard-text="#87e8de" title="点击可复制颜色码" class="my-float clipboard" style="background:#87e8de;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#87e8de</div></div><div data-clipboard-text="#b5f5ec" title="点击可复制颜色码" class="my-float clipboard" style="background:#b5f5ec;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#b5f5ec</div></div><div data-clipboard-text="#e6fffb" title="点击可复制颜色码" class="my-float clipboard" style="background:#e6fffb;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$cyan-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#e6fffb</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Daybreak Blue / 拂晓蓝</h3> <p data-v-4de1ef34>包容、科技、普惠</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#1890ff" class="my-float clipboard" style="background:#1890ff;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#1890ff</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#002766" title="点击可复制颜色码" class="my-float clipboard" style="background:#002766;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#002766</div></div><div data-clipboard-text="#003a8c" title="点击可复制颜色码" class="my-float clipboard" style="background:#003a8c;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#003a8c</div></div><div data-clipboard-text="#0050b3" title="点击可复制颜色码" class="my-float clipboard" style="background:#0050b3;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#0050b3</div></div><div data-clipboard-text="#096dd9" title="点击可复制颜色码" class="my-float clipboard" style="background:#096dd9;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#096dd9</div></div><div data-clipboard-text="#1890ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#1890ff;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#1890ff</div></div><div data-clipboard-text="#40a9ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#40a9ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#40a9ff</div></div><div data-clipboard-text="#69c0ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#69c0ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#69c0ff</div></div><div data-clipboard-text="#91d5ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#91d5ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#91d5ff</div></div><div data-clipboard-text="#bae7ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#bae7ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#bae7ff</div></div><div data-clipboard-text="#e6f7ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#e6f7ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$blue-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#e6f7ff</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Geek Blue / 极客蓝</h3> <p data-v-4de1ef34>探索、钻研</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#2f54eb" class="my-float clipboard" style="background:#2f54eb;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#2f54eb</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#030852" title="点击可复制颜色码" class="my-float clipboard" style="background:#030852;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#030852</div></div><div data-clipboard-text="#061178" title="点击可复制颜色码" class="my-float clipboard" style="background:#061178;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#061178</div></div><div data-clipboard-text="#10239e" title="点击可复制颜色码" class="my-float clipboard" style="background:#10239e;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#10239e</div></div><div data-clipboard-text="#1d39c4" title="点击可复制颜色码" class="my-float clipboard" style="background:#1d39c4;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#1d39c4</div></div><div data-clipboard-text="#2f54eb" title="点击可复制颜色码" class="my-float clipboard" style="background:#2f54eb;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#2f54eb</div></div><div data-clipboard-text="#597ef7" title="点击可复制颜色码" class="my-float clipboard" style="background:#597ef7;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#597ef7</div></div><div data-clipboard-text="#85a5ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#85a5ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#85a5ff</div></div><div data-clipboard-text="#adc6ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#adc6ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#adc6ff</div></div><div data-clipboard-text="#d6e4ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#d6e4ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#d6e4ff</div></div><div data-clipboard-text="#f0f5ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#f0f5ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$geekblue-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#f0f5ff</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Golden Purple / 酱紫</h3> <p data-v-4de1ef34>优雅、浪漫</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#722ed1" class="my-float clipboard" style="background:#722ed1;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#722ed1</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#120338" title="点击可复制颜色码" class="my-float clipboard" style="background:#120338;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#120338</div></div><div data-clipboard-text="#22075e" title="点击可复制颜色码" class="my-float clipboard" style="background:#22075e;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#22075e</div></div><div data-clipboard-text="#391085" title="点击可复制颜色码" class="my-float clipboard" style="background:#391085;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#391085</div></div><div data-clipboard-text="#531dab" title="点击可复制颜色码" class="my-float clipboard" style="background:#531dab;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#531dab</div></div><div data-clipboard-text="#722ed1" title="点击可复制颜色码" class="my-float clipboard" style="background:#722ed1;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#722ed1</div></div><div data-clipboard-text="#9254de" title="点击可复制颜色码" class="my-float clipboard" style="background:#9254de;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#9254de</div></div><div data-clipboard-text="#b37feb" title="点击可复制颜色码" class="my-float clipboard" style="background:#b37feb;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#b37feb</div></div><div data-clipboard-text="#d3adf7" title="点击可复制颜色码" class="my-float clipboard" style="background:#d3adf7;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#d3adf7</div></div><div data-clipboard-text="#efdbff" title="点击可复制颜色码" class="my-float clipboard" style="background:#efdbff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#efdbff</div></div><div data-clipboard-text="#f9f0ff" title="点击可复制颜色码" class="my-float clipboard" style="background:#f9f0ff;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$purple-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#f9f0ff</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Magenta / 法式洋红</h3> <p data-v-4de1ef34>明快、感性</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#eb2f96" class="my-float clipboard" style="background:#eb2f96;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#eb2f96</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#520339" title="点击可复制颜色码" class="my-float clipboard" style="background:#520339;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#520339</div></div><div data-clipboard-text="#780650" title="点击可复制颜色码" class="my-float clipboard" style="background:#780650;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#780650</div></div><div data-clipboard-text="#9e1068" title="点击可复制颜色码" class="my-float clipboard" style="background:#9e1068;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#9e1068</div></div><div data-clipboard-text="#c41d7f" title="点击可复制颜色码" class="my-float clipboard" style="background:#c41d7f;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#c41d7f</div></div><div data-clipboard-text="#eb2f96" title="点击可复制颜色码" class="my-float clipboard" style="background:#eb2f96;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#eb2f96</div></div><div data-clipboard-text="#f759ab" title="点击可复制颜色码" class="my-float clipboard" style="background:#f759ab;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#f759ab</div></div><div data-clipboard-text="#ff85c0" title="点击可复制颜色码" class="my-float clipboard" style="background:#ff85c0;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#ff85c0</div></div><div data-clipboard-text="#ffadd2" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffadd2;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffadd2</div></div><div data-clipboard-text="#ffd6e7" title="点击可复制颜色码" class="my-float clipboard" style="background:#ffd6e7;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#ffd6e7</div></div><div data-clipboard-text="#fff0f6" title="点击可复制颜色码" class="my-float clipboard" style="background:#fff0f6;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$magenta-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#fff0f6</div></div></div></div></div><div class="el-col el-col-8" style="padding-left:10px;padding-right:10px;" data-v-554185ac><div class="palette" data-v-4de1ef34 data-v-554185ac><h3 data-v-4de1ef34>Grey / 灰度</h3> <p data-v-4de1ef34>中性</p> <div class="primary" data-v-4de1ef34><div title="点击可复制颜色码" data-clipboard-text="#666666" class="my-float clipboard" style="background:#666666;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-primary</div> <div class="my-float-item is-right" data-v-4de1ef34>#666666</div></div></div> <div class="levels" data-v-4de1ef34><div data-clipboard-text="#000000" title="点击可复制颜色码" class="my-float clipboard" style="background:#000000;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-1</div> <div class="my-float-item is-right" data-v-4de1ef34>#000000</div></div><div data-clipboard-text="#000000" title="点击可复制颜色码" class="my-float clipboard" style="background:#000000;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-2</div> <div class="my-float-item is-right" data-v-4de1ef34>#000000</div></div><div data-clipboard-text="#1a1a1a" title="点击可复制颜色码" class="my-float clipboard" style="background:#1a1a1a;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-3</div> <div class="my-float-item is-right" data-v-4de1ef34>#1a1a1a</div></div><div data-clipboard-text="#404040" title="点击可复制颜色码" class="my-float clipboard" style="background:#404040;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-4</div> <div class="my-float-item is-right" data-v-4de1ef34>#404040</div></div><div data-clipboard-text="#666666" title="点击可复制颜色码" class="my-float clipboard" style="background:#666666;color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-5</div> <div class="my-float-item is-right" data-v-4de1ef34>#666666</div></div><div data-clipboard-text="#737373" title="点击可复制颜色码" class="my-float clipboard" style="background:#737373;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-6</div> <div class="my-float-item is-right" data-v-4de1ef34>#737373</div></div><div data-clipboard-text="#808080" title="点击可复制颜色码" class="my-float clipboard" style="background:#808080;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-7</div> <div class="my-float-item is-right" data-v-4de1ef34>#808080</div></div><div data-clipboard-text="#8c8c8c" title="点击可复制颜色码" class="my-float clipboard" style="background:#8c8c8c;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-8</div> <div class="my-float-item is-right" data-v-4de1ef34>#8c8c8c</div></div><div data-clipboard-text="#999999" title="点击可复制颜色码" class="my-float clipboard" style="background:#999999;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-9</div> <div class="my-float-item is-right" data-v-4de1ef34>#999999</div></div><div data-clipboard-text="#a6a6a6" title="点击可复制颜色码" class="my-float clipboard" style="background:#a6a6a6;color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$grey-10</div> <div class="my-float-item is-right" data-v-4de1ef34>#a6a6a6</div></div></div></div></div></div></div> <h2 id="中性色板"><a href="#中性色板" class="header-anchor">#</a> 中性色板</h2> <p>MyWeb 4.x 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。
产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。
MyWeb 4.x 的中性色在落地的时候是按照透明度的方式实现的，具体色板如下：</p> <div class="neutral-colors" data-v-11070a0a><div class="el-row" style="margin-left:-10px;margin-right:-10px;" data-v-11070a0a><div class="el-col el-col-12" style="padding-left:10px;padding-right:10px;" data-v-11070a0a><div class="palette dark" data-v-4de1ef34 data-v-11070a0a><h3 data-v-4de1ef34>深色背景</h3> <p data-v-4de1ef34></p> <!----> <div class="levels" data-v-4de1ef34><div data-clipboard-text="rgba(255, 255, 255, 1)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 1);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-1</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 1)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.85)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.85);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-2</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.85)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.65)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.65);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-3</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.65)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.45)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.45);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-4</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.45)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.25)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.25);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-5</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.25)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.15)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.15);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-6</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.15)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.09)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.09);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-7</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.09)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.04)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.04);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-8</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.04)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0.02)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0.02);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-9</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0.02)</div></div><div data-clipboard-text="rgba(255, 255, 255, 0)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(255, 255, 255, 0);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-white-10</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(255, 255, 255, 0)</div></div></div></div></div> <div class="el-col el-col-12" style="padding-left:10px;padding-right:10px;" data-v-11070a0a><div class="palette" data-v-4de1ef34 data-v-11070a0a><h3 data-v-4de1ef34>浅色背景</h3> <p data-v-4de1ef34></p> <!----> <div class="levels" data-v-4de1ef34><div data-clipboard-text="rgba(0, 0, 0, 1)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 1);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-1</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 1)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.85)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.85);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-2</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.85)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.65)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.65);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-3</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.65)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.45)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.45);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-4</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.45)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.25)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.25);color:#fff;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-5</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.25)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.15)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.15);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-6</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.15)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.09)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.09);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-7</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.09)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.04)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.04);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-8</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.04)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0.02)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0.02);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-9</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0.02)</div></div><div data-clipboard-text="rgba(0, 0, 0, 0)" title="点击可复制颜色码" class="my-float clipboard" style="background:rgba(0, 0, 0, 0);color:#000;" data-v-4de1ef34><div class="my-float-item is-left" data-v-4de1ef34>$neutral-black-10</div> <div class="my-float-item is-right" data-v-4de1ef34>rgba(0, 0, 0, 0)</div></div></div></div></div></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/guide/route.html" class="prev">
        自动配置路由
      </a></span> <span class="next"><a href="/my/guide/theme.html">
        内置主题
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.145deadf.js" defer></script><script src="/my/assets/js/546.c48d7d92.js" defer></script><script src="/my/assets/js/1331.9b9e0405.js" defer></script><script src="/my/assets/js/846.453b6d32.js" defer></script><script src="/my/assets/js/810.a822a3bc.js" defer></script>
  </body>
</html>
